import React from 'react';
import {RoomItemStyle} from "./style";
import {Rating} from "@mui/material";

const RoomItem = (props) => {
    const {itemData} = props;
    return (
        <RoomItemStyle verifyColor={itemData?.verify_info?.text_color || '#39576a'}>
            <div className='inner'>
                <div className='cover'>
                    <img src={itemData.picture_url} alt=''/>
                </div>
                <div className='desc'>
                    {itemData.verify_info.messages.join(' . ')}
                </div>
                <div className='name'>
                    {itemData.name}
                </div>
                <div className='price'>
                    ￥{itemData.price}/晚
                </div>
                <div className='bottom'>
                    <Rating
                        value={itemData.start_rating ?? Math.random() * 3 + 2}
                        precision={0.1}
                        readOnly
                        sx={{fontSize: '12px', color: '00848a', marginRight: '-1px'}}
                        />
                </div>
            </div>
        </RoomItemStyle>
    );
};

export default RoomItem;